<template>
  <div class="playListDetailContainer">
    <a-row>
      <a-col :span="7">
        <div class="playListDetailCover">
          <img :src="coverImgUrl"/>
        </div>
      </a-col>
      <a-col :span="17">
        <div class="playListDetailInfo">
          <a-row>
            <a-col :span="24" style="position: relative">
              <div style="display: inline-block;border: 1px red solid;padding: 0.1rem 0.3rem;border-radius: 0.2rem;width: 3rem;text-align: center;color: red;">歌单</div>
              <div style="display: inline-block;font-weight: bold;font-size: 18px;margin-left: 1rem;position: absolute;top: 0;">
                {{ playListName }}</div>
            </a-col>
            <a-col :span="24">
              <div class="creatorAvatar">
                <img  :src="avatarUrl" width="20" height="20"/>
                <span>{{ nickname }} &nbsp;&nbsp;&nbsp;</span>
                <span>{{ formatDate(createTime) }} 创建</span>
              </div>
            </a-col>
            <a-col :span="24">
              <a-button-group>
                <a-button type="danger" size="small" @click="replaceMusicList"><a-icon type="caret-right" />全部播放 </a-button>
                <a-button type="danger" size="small"><a-icon type="plus" /> </a-button>
              </a-button-group>
              <a-button  size="small" class="collectionBtn" ><a-icon type="folder-add" />收藏(3) </a-button>
              <a-button  size="small" class="collectionBtn" ><a-icon type="share-alt" />分享(0)</a-button>
<!--              <a-button  size="small" class="collectionBtn" ><a-icon type="download" />下载全部</a-button>-->
            </a-col>
            <a-col :span="24">
              <div style="margin-top: 0.5rem;font-size: 12px;">歌曲数：{{trackCount}} &nbsp;&nbsp;&nbsp;播放：{{playCount}}</div>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col :span="24" style="margin-top: 1.5rem;text-align: left;">
        <a-tabs default-active-key="1" @change="callback" :tabBarGutter="1">
          <a-tab-pane key="1" tab="歌曲列表">
            <play-list-music  ref="playListMusic"/>
          </a-tab-pane>
          <a-tab-pane key="2" tab="评论" force-render>
            敬请期待
          </a-tab-pane>
          <a-tab-pane key="3" tab="收藏者">
            敬请期待
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {playlistDetail} from "@/api/api";
import {formatDate} from '@/utils/util'
import PlayListMusic from "@/components/web/content/content/playListDetail/PlayListMusic";
import {replaceMusicList} from "@/components/web/util/music";
export default {
  name: "PlaylistDetail",
  components: {PlayListMusic},
  data(){
    return {
      playListName:'',
      coverImgUrl:'',
      avatarUrl:'',
      nickname:'',
      createTime:0,
      trackCount:0,
      playCount:0,
      playListId:0,
    }
  },
  mounted() {
    this.getPlayListDetail(this.$route.query.musicListId);
  },
  methods:{
    formatDate(time){
      return formatDate(time)
    },
    getPlayListDetail(playListId){
      if (!playListId || playListId == 0) {
        return;
      }
      let _this = this;
      _this.playListId = playListId
      let params = {
        'id':playListId,
        'cookie':this.$store.getters.cookie
      }
      playlistDetail(params).then(res=>{
        _this.coverImgUrl = res.playlist.coverImgUrl
        _this.playListName = res.playlist.name
        _this.avatarUrl = res.playlist.creator.avatarUrl
        _this.nickname = res.playlist.creator.nickname
        _this.createTime = res.playlist.createTime
        _this.trackCount = res.playlist.trackCount
        _this.playCount = res.playlist.playCount
        _this.$refs.playListMusic.getPlayListMusicList(playListId)
      }).catch(error =>{
        console.log('playlistDetail',error)
      })
    },
    callback(key) {
      console.log(key);
    },
    // 将当前歌单的音乐替换到正在播放列表
    replaceMusicList(){
      this.$refs.playListMusic.replaceMusicList()
    },
  },
  watch:{
    // 利用watch方法检测路由变化：
    '$route': function (to, from) {
      // 拿到目标参数 to.query.id 去再次请求数据接口
      // this.loadPageData(to.query.id)
      this.getPlayListDetail(to.query.musicListId);
    }
  }
}
</script>

<style scoped>
.playListDetailContainer{

}
.playListDetailCover{
  /*border: 1px red solid;*/
  height: 10rem;
}
.playListDetailCover>img{
  width: 9.8rem;
  height: 9.8rem;
  border-radius: 0.4rem;
}
.playListDetailInfo{
  /*border: 1px red solid;*/
  padding-left: 1rem;
  height: 10rem;
  text-align: left;
}
.creatorAvatar{
  margin-top: 0.5rem;
}
.creatorAvatar>img{
  border-radius: 50%;
  margin-right: 0.5rem;
  border: 1px #e0e0e0 solid;
}
.creatorAvatar>span{
  font-size: 12px;
}

.ant-btn-group {
  margin-top: 0.5rem;
  border-radius: 1rem;
  overflow: hidden;
}
.ant-btn-danger:hover{
  background: red;
}
.collectionBtn{
  border-radius: 1rem;
  margin-left: 0.5rem;
}
.collectionBtn:hover{
  color: gray;
  border: 1px #e0e0e0 solid ;
  background-color: #eaeaea;
}

::v-deep .ant-tabs-nav .ant-tabs-tab-active{
  color: black;
  font-weight: bold;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:active{
  color: black;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:hover{
  color: black;
}
::v-deep .ant-tabs-ink-bar{
  background-color: red ;
}
</style>
